<template>
  <div class="caiwuguanli">
    <div class="head">
      <h2>财务管理</h2>
      <p>认证总金额: <i>{{authenticationMoney}}</i>元</p>
      <p>广告总金额: <i>{{advertMoney}}</i>元</p>
      <p>实际收入金额: <i>{{actualMoney}}</i>元</p>
    </div>
    <ul>
      <li>
        <b>订单类型</b>
        <el-select v-model="state">
          <el-option
            v-for="item in lists"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </li>
      <li>
        <b>注册时间</b>
        <el-date-picker
          v-model="chooseDate"
          type="datetimerange"
          align="right"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </li>
      <li>
        <b>用户名</b>
        <el-input v-model="userName"></el-input>
      </li>
      <li>
        <el-button type="primary">查询</el-button>
      </li>

    </ul>
    <!--表格-->
    <el-table
      :data="tableData.slice((currentPage-1)*pageSize, currentPage*pageSize)"
      :highlight-current-row="true"
      style="width: 100%">
      <el-table-column
        align="center"
        label="订单时间"
      >
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.date }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="订单编号"
        align="center"
      >
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.order }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="订单类型"
        align="center"
      >
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.type }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="商家用户名"
        align="center"
      >
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.name }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="商家类别"
        align="center"
      >
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.orderType }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="金额（元）"
        align="center"
      >
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.money }}</span>
        </template>
      </el-table-column>

    </el-table>
    <el-pagination :current-page.sync="currentPage" @current-change="handleCurrentChange" :page-size="pageSize"
                   background layout=" prev, pager, next" :total="tableData.length">
    </el-pagination>




  </div>
</template>

<script>
  export default {
    data(){
      return{
        state:'',
        lists: [
          {
            value: '选项1',
            label: '黄金糕'
          },
          {
            value: '选项2',
            label: '双皮奶'
          },
        ],
        tableData: [
          {
            date: '2016-05-02',
            order:'123546',
            name: '王小虎',
            type:'汽修汽配',
            orderType:'1',
            money:'20',
          },
          {
            date: '2016-05-02',
            order:'123546',
            name: '王小虎',
            type:'汽修汽配',
            orderType:'2',
            money:'20',
          },
          {
            date: '2016-05-02',
            order:'123546',
            name: '王小虎',
            type:'汽修汽配',
            orderType:'1',
            money:'20',
          },
        ],
        pageSize: 2, // 每页数量
        currentPage: 1, //当前页
        authenticationMoney:'1',//认证总金额
        advertMoney:'1',//广告总金额
        actualMoney:'1',//实际收入金额




      }
    },
    methods:{
      handleCurrentChange(val) {
        this.currentPage = val * 1
      },

    }
  }
</script>

<style scoped lang="scss">
  .caiwuguanli{
    width: 100%;
    .head{
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      padding: 20px 0;
      h2{
        display: inline-block;
        width: 100%;
        font-size: 30px;
        text-align: left;
        padding-left: 10px;
      }
      p{
        font-size: 20px;
        padding: 20px 10px;
      }
    }

    ul{
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      li{
        margin-top: 30px;
        height: 40px;
        display: flex;
        line-height: 40px;
        justify-content: center;
        b{
          font-size: 18px;
          vertical-align: middle;
          margin-right: 10px;
        }
        &:nth-child(3){
          b{
            width: 100px;
          }
        }
      }

    }
    .el-table{
      margin-top: 40px;
    }
    .el-pagination{
      margin-top: 40px;
    }
  }
</style>
